<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title>订单详情</title>
<!-- 公用样式css -->
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/room-reservation.css" rel="stylesheet" type="text/css" />
<link href="css/evaluate.css" rel="stylesheet" type="text/css" />
<link href="css/weui.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-weui.min.css" rel="stylesheet" type="text/css" />
<style>
    .contactInput{ outline: none; -webkit-appearance: none; border-radius: 0; border:0px;}
    .am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms ; width: 100%; z-index: 1110; }
    .am-modal-active { transform: translateY(0px);  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
    .am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }
    .am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }
    .am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }
    .am-share-footer { margin: 10px; }
    .am-share-footer .share_btn { color: #555;  display: block; width: 100%; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 0; cursor: pointer;  font-size: 16px; font-weight: 400; line-height: 1.2; padding: 0.625em 0; text-align: center; transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s; vertical-align: middle; white-space: nowrap;font-family:"微软雅黑";  }
    .am-share-sns { background-color: #f8f8f8; border-radius: 0 0 2px 2px; margin: 0 10px; padding-top: 15px; height:auto; zoom:1; overflow:auto; }
    .am-share-sns>li{ padding:0 10px; border-bottom:1px solid #eee; height:auto; overflow:hidden;}
    .sharebg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; display:none; }
    .sharebg-active { opacity: 1; display:block; }
    .frame_div{position: absolute;width: 100%; height:100%;z-index: 9999;display:none;left:0;top:0}
    .div_frame{width:100%;height:100%;border:0px;}
</style>
</head>

<body>
<header class="header">
   <%-- <div class="header-left" onclick="_back()"><img class="img-home" src="images/return.png" /></div>--%>
    <div class="header-center word5 "><a class="header-arrow">订单详情</a></div>
    <div class="header-right marg1"></div>
</header>
<div class="main bot30" style="background:#fbfbfb;">
    <c:forEach items="${dataList}" var="item">
        <div class="pay-oda word7" id="statuesTitle">${item.OrdStateName}</div>
        <div class="pay-state">
            <ul>
                <li class="wor-height"><span class="word4">
                <c:if test="${item.OrdState ==0||item.OrdState == -1}">应付房费</c:if>
                <c:if test="${item.OrdState !=0 && item.OrdState !=-1 }">实付房费</c:if></span>
                <span class="word6">¥${item.PayTotal}</span></li>
                <li class="wor-colour1"><span>总金额</span><span>¥${item.TotalSettlement}</span></li>
            </ul>
            <ul class="float-r">
                <li class="wor-colour6 marg1 word4"><a href="#" onClick="toshare();return false;">费用明细${item.AllawCancel}</a></li>
            </ul>
        </div>
        <div class="am-share">
            <div class="house_teitle">
                <h3 class="float-l">费用明细</h3><button class="share_btn float-r img-a"></button>
            </div>
            <ul class="reserva-mx">
               <li><span class="float-l word5">共${item.RoomNum}间总价</span><span class="float-r wor-colour2  word6">¥${item.TotalSettlement}</span></li>
	            <c:forEach var="info" items="${item.PriceDetailList}">
	            	<li><span class="float-l">${info.CostDate}</span><span class="float-r wor-colour4">¥ ${info.RoomPrice}</span><span class="float-r">${info.RoomNum}间</span></li>
	          	</c:forEach>
            </ul>
        </div>
        <c:if test="${item.OrdState ==0}">
        <ul id="${item.Code}ul"class="pay-button-lsit">
            <li><button onclick="_cancelOrd('${item.Code}')" class="pay-button-escs open-window">取消</button></li>
            <li><button onclick="_payOrd('${item.Code}')" class="pay-button-ok">支付</button></li>
        </ul>
        </c:if>
        <c:if test="${item.OrdState ==1 && item.AllowCancel}">
	        <ul id="${item.Code}ul"class="pay-button-lsit">
	            <li style="width:100%"><button onclick="_cancelOrd('${item.Code}')" class="pay-button-escs open-window" >取消</button></li>
	        </ul>
        </c:if>
        <ul class="data-title">
            <li class="word6" style=" font-weight:600;" id="hotelName">${item.HotelName}</li>
            <li class="word4"><span>${item.RoomType}</span><span>${item.RoomNum}间</span></li>
            <li><span>${item.ArrivalsTime}</span><span>~~</span><span>${item.CheckOutTime}</span></li>
        </ul>
        <input type="hidden" value="${item.Lng}" id="hotleLng"/>
		<input type="hidden" value="${item.Lat}" id="hotleLat"/>
		<input type="hidden" value="${item.HotelAddress}" id="hotleAddress"/>
        <ul class="add-title">
            <li><span>地址：</span><span onclick="openMap()">${item.HotelAddress}</span><img class="float-r " src="images/icon25.png" onclick="openMap()"/><%--<span class="float-r">酒店导航</span>--%></li>
            <li><span>电话：</span><span><a href="tel:${item.Phone1}">${item.Phone1}</a></span>
            <img class="float-r" src="images/icon26.png" ><span class="float-r"><a href="tel:${item.Phone1}">联系酒店</a></span></li>
        </ul>
        <div class="disco-all">
            <span class="tch-button">优惠选择</span><span class="switch-explain word3 wor-colour1">各优惠方式不能同时享用</span>
        </div>
        <div style=" padding:10px;background:#fff;">
            <c:forEach var="room" items="${RoomList}" varStatus="userStatus">
            <ul class="room-card">
                <div><span class="room-bjs">第${userStatus.count}间</span><span class="room-words-a">${room.OrdDtlStateName}</span></div>
                <li class="wor-colour6"><span>入住人：</span><span>${room.GuestName}</span></li>
                <li class="wor-colour6"><span>任性延时券</span><span>&nbsp;*&nbsp;${room.DelayedUseNum}</span></li>
            </ul>
            </c:forEach>
        </div>
        <ul class="data-title marg4">
            <li ><span class="word5" style=" font-weight:600;">入住信息</span><span class="float-r">订单号：${item.Code}</span></li>
            <li class="word4"><span>入住人姓名：</span><span>${item.GuestName}</span></li>
            <li class="word4"><span>联系电话：</span><span>${item.GuestPhone}</span></li>
            <li class="word4"><span>订单备注：</span><span>${item.Remarks}</span></li>
        </ul>
         <ul class="data-title marg4" >
            <li ><span class="word5" style=" font-weight:600;">取消政策</span></li>
            <li class="word4" style="margin-bottom:30px;"><span>${item.ChancelPolicy}</span></li>
        </ul>
    </c:forEach>
	<form id="submitForm" action="order/getAllOrderList" method="post">
		<input type="hidden" id="ordState" name="ordState" value="${orderState}">
		<input type="hidden" id="ordCode" name="ordCode">
	</form>
</div>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/windowOpen.js" ></script>
<script type="text/javascript" src="js/artDialog/artDialog.source.js?skin=simple"></script>
<script type="text/javascript" src="js/artDialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
    function toshare(){
        $(".am-share").addClass("am-modal-active");
        if($(".sharebg").length>0){
            $(".sharebg").addClass("sharebg-active");
        }else{
            $("body").append('<div class="sharebg"></div>');
            $(".sharebg").addClass("sharebg-active");
        }
        $(".sharebg-active,.share_btn").click(function(){
            $(".am-share").removeClass("am-modal-active");
            setTimeout(function(){
                $(".sharebg-active").removeClass("sharebg-active");
                $(".sharebg").remove();
            },300);
        })
    }
    function _back(){
    	$("#submitForm").attr("action","order/getAllOrderList").submit();
    }
    $(document).ready(function(){
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '${wxMap.appId}', // 必填，公众号的唯一标识
			timestamp: '${wxMap.timestamp}' , // 必填，生成签名的时间戳
			nonceStr: '${wxMap.nonceStr}', // 必填，生成签名的随机串
			signature: '${wxMap.signature}',// 必填，签名
			jsApiList: [
				'openLocation' //获取地理位置接口
			]
		});
	});
	function openMap(){
    	var long=$("#hotleLng").val();;
    	var lat=$("#hotleLat").val();;
    	var name=$("#hotelName").html();
    	var address=$("#hotleAddress").val();
    	if(long!=null && Number(long)!=0 && long!="undefined"&&lat!=null && Number(long)!=0 && lat!="undefined" ){
    	    //var latandlong=bd2gcjString(parseFloat(lat)+","+parseFloat(long)).split(",");
    		//var lat=latandlong[0];
    		//var long=latandlong[1];
	    	wx.openLocation({
			    latitude: parseFloat(lat), // 纬度，浮点数，范围为90 ~ -90
			    longitude: parseFloat(long), // 经度，浮点数，范围为180 ~ -180。
			    name: name, // 位置名
			    address: address, // 地址详情说明
			    scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
			    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
			});
    	}
    }
   	function bd2gcjString(value) {
        var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
        var ll = value.split(",");
        var x = ll[0] - 0.0065, y = ll[1] - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
        return (z * Math.cos(theta)) + ',' + (z * Math.sin(theta));
	}
    function _cancelOrd(code){
    	$.ajax({
            url:"<%=basePath%>order/cancelOrder",
            type:"post",
            data:{ordCode:code},
            success:function(data){
           		if(data=="gotoRegister"){
                    window.location.replace("<%=basePath%>home/gotoRegister");//注册页面
                }else{
                    if(data.stateID==0&&data.businessState==0){
                        $("#"+code+"ul").hide();
                        $("#statuesTitle").html("已取消");

                	}else{
                        art.dialog.tips(data.msgInfo);
                	}
                }
            },
            error:function(e){
                window.location.replace("<%=basePath%>home/index");
            }
        });
    }
    function _payOrd(code){
    	$("#ordCode").val(code);
    	$("#submitForm").attr("action","home/orderPaymentDetail").submit();
    }
</script>
</body>
</html>
